<template>
  <div class="img-search-body">
    <div class="search-tool">
      <input class="search-input" v-model="searchkey" type="text" placeholder="请输入内容">
      <input class="search-button" type="button" value="搜索" @click="search">
    </div>
  </div>
</template>

<script>
export default {
  name: "img-search",
  data(){
    return {
      searchkey: ''
    }
  },
  methods: {
    search(){
      this.$router.push({name:'search',query:{searchkey: this.searchkey}})
    }
  }
}
</script>

<style scoped>
.img-search-body{
  position: relative;
  width: 100%;
  height: 500px;
  background: url("http://localhost:5000/resources/img/img.jpg") no-repeat center 80%;
}
.search-tool{
  position: absolute;
  width: 60%;
  height: 15%;
  top: 30%;
  left: 50%;
  margin-left: -30%;
  opacity: 0.5;
  display: flex;
}
.search-input{
  width: 90%;
  padding-left: 20px;
  font-size: 21px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.search-button{
  width: 10%;
  font-size: 21px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
.search-button:hover{
  cursor: pointer;
}

</style>
